<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>selectInterface</title>
	
	<style>
		body {
		  padding-top: 3.5rem;
		}
		img {
			width:100px;
			height:100px;
		}
	</style>
	
    <!-- Bootstrap core CSS -->
    <link href="./styles/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
		  <ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="selectBank.html">电子支付:选择银行</a></li>
			<li class="breadcrumb-item active" aria-current="page">选择接口</li>
		  </ol>
        </ul>
		<form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="接口名称" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="mt-5">
		<div class="container-fluid tab-pane fade show active" id="old" role="tabpanel" aria-labelledby="old-tab" style="text-align:center">
          <table class="table table-bordered table-hover">
		    <thead class="thead-dark">
			  <tr>
			    <th scope="col">序号</th>
				<th scope="col">银行名称</th>
				<th scope="col">接口ID</th>
			    <th scope="col">接口名称</th>
			    <th scope="col">案例完成度</th>
			    <th scope="col">操作</th>
			  </tr>
		    </thead>
		    <tbody class="row1">
		    </tbody>
		  </table>
        </div>
        <hr>
    </main>

    <footer class="container">
      <p>&copy; Company 电子支付</p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="js/jquery-slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/cookie_util.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript">
    
    var caseTemplate = '<tr>'+
	    			       '<th scope="row">[seq]</th>'+
						   '<td>[bankName]</td>'+
						   '<td>[interfId]</td>'+
						   '<td>[interfName]</td>'+
						   '<td>[success]/35</td>'+
						   '<td><button class="btn btn-outline-success my-2 my-sm-0" onclick="selectCase([seq1]);">Select</button></td>'+
					   '</tr>';
	var interfList;
    $(function(){
    	interfList = JSON.parse(localStorage.getItem("interfList"));
    	
    	for(var i = 0 ; i < interfList.length ; i++){
    		
    		var success;
    		if(interfList[i].success == null){
    			success = 0;
    		}else{
    			success = interfList[i].success;
    		}
    		
    		var div = caseTemplate.replace("[seq]",i+1)
    					.replace("[bankName]",localStorage.getItem("bankName"))
    					.replace("[interfName]",interfList[i].interfName)
    					.replace("[success]",success)
    					.replace("[seq1]",i)
    					.replace("[interfId]",interfList[i].interfId);
    		$(".row1").append(div);
    	}
    	
    });
    
    function selectCase(i){
    	var interfId = interfList[i].interfId;
    	localStorage.setItem("interfId", interfId);
    	var data = {"bankId":localStorage.getItem("bankId"),"deptId":localStorage.getItem("departmentId"),"interfId":interfId};
    	var url = "selectCase.do";
    	
    	$.post(
    		url,
    		data,
    		function(result){
    			if(result.state == 0){
					var caseList = result.data;
					localStorage.setItem("caseList", JSON.stringify(caseList));
					location.href="selectCase.html";
    			}else{
        			alert(result.data);
    			}
    		}
    	);
    }
    </script>
    
  </body>
</html>
